<template>
  <el-card class="result">
    <div slot="header" class="title">结果展示</div>
    <div>
      <el-select v-model="selectedId">
        <div slot="prefix" class="select-prefix">
          <div>#</div>
        </div>
        <el-option v-for="(quest, id) in quests" :key="id" :value="id">
          <span>#{{ id }}</span>
        </el-option>
      </el-select>
    </div>
    <p v-if="quest">
      <table v-if="quest.evalType == 2">
        <tr>
          <th></th>
          <th>攻击成功数量</th>
          <th v-for="defense in evalDefenses" :key="defense.id">
            <span>#{{ defense.id }} -</span>
            <span v-if="defense.method">{{ defense.method }} - {{ defense.desc }}</span>
            <span v-else>任务不存在</span>
          </th>
        </tr>
        <tr v-for="{ quest, result } in evalAttacks" :key="quest.id">
          <th>
            <span>#{{ quest.id }} -</span>
            <span v-if="quest.method">{{ quest.method }} - {{ quest.desc }}</span>
            <span v-else>任务不存在</span>
          </th>
          <td>{{ result[0].attackAffected }}</td>
          <td v-for="(v, k) in result" :key="k">{{ (v.accuracy * 100).toFixed(1) }}%</td>
        </tr>
      </table>
      <table v-else>
        <tr>
          <th></th>
          <th v-for="(_, item) in evalQuests[0].result" :key="item">{{ item }}</th>
        </tr>
        <tr v-for="{ quest, result } in evalQuests" :key="quest.id">
          <th>
            <span>#{{ quest.id }} -</span>
            <span v-if="quest.method">{{ quest.method }} - {{ quest.desc }}</span>
            <span v-else>任务不存在</span>
          </th>
          <td v-for="(_, item) in evalQuests[0].result" :key="item">{{ result[item].toFixed(3) }}</td>
        </tr>
      </table>
    </p>
  </el-card>
</template>

<script>
export default {
  props: {
    queue: Array
  },
  data() {
    return {
      selectedId: null
    }
  },
  computed: {
    quests() {
      const rt = {}
      for (const quest of this.queue) {
        if (quest.status == 3 && quest.type == 4) {
          rt[quest.id] = quest
        }
      }
      return rt
    },
    quest() {
      return this.selectedId == null ? null : this.quests[this.selectedId]
    },
    evalAttacks() {
      const ids = this.quest.evalAttacks
      if (!this.quest || !ids) {
        return null
      }
      const rt = []
      for (let i = 0; i < ids.length; i++) {
        const quest = this.queue.find(q => q.id == ids[i])
        rt.push({
          quest: quest || { id: ids[i] },
          result: this.quest.result[i]
        })
      }
      return rt
    },
    evalDefenses() {
      const ids = this.quest.evalDefenses
      if (!this.quest || !ids) {
        return null
      }
      return ids.map(id => this.queue.find(q => q.id == id) || { id })
    },
    evalQuests() {
      if (!this.quest) {
        return null
      }
      const ids = this.quest.evalAttacks || this.quest.evalDefenses
      const rt = []
      for (let i = 0; i < ids.length; i++) {
        const quest = this.queue.find(q => q.id == ids[i])
        rt.push({
          quest: quest || { id: ids[i] },
          result: this.quest.result[i]
        })
      }
      return rt
    }
  },
  methods: {
    changeSelected(id) {
      if (this.quests[id]) {
        this.selectedId = id
      }
    }
  }
}
</script>

<style scoped>
table {
  border-collapse: collapse;
}

th,
td {
  border: 1px solid black;
}
</style>
